<template>
  <div class="commission-wrapper">
    <div class="top">
      <div class="title-wrapper">
        <div class="title">商品分类</div>
      </div>
    </div>
    <div class="middle">
      <div class="left">
        <Input ref="searchInpur" placeholder="请输入商品/货号" class="input-cls" @search="handleSearch" />
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100">
          <el-form-item label="分类筛选：">
            <el-select v-model="value" clearable placeholder="全部" @change="handleChange">
              <el-option
                v-for="item of classicList"
                :key="item.id"
                :label="item.kind_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-button type="primary" @click.native="setting">批量设置佣金</el-button>
      </div>
    </div>
    <div class="bottom">
      <table-list :list="list" :page-size="pageSize" :current-page="currentPage" @multipleSelection="handleMultipleSelection" />
    </div>
    <Pagination
      class="pagination"
      :page-size="pageSize"
      :total="total"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
    <Dialog ref="dialog" title="批量设置佣金" class="dialog" @closeDialog="submit">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="店铺佣金比例:" prop="shop">
          <el-input v-model="form.shop" />
          <span>%</span>
        </el-form-item>
        <el-form-item label="店员佣金比例:" prop="user">
          <el-input v-model="form.user" />
          <span>%</span>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>
<script>
import Input from '@/common/input'
import TableList from './commission/tableList'
import Dialog from '@/common/dialog'
import Pagination from '@/common/pagination'
import { getCommissionList, setMutipleCommission } from '@/api/commission'
import { getClassificationList } from '@/api/goods'
const ERR_OK = 200
export default {
  components: {
    Input,
    TableList,
    Dialog,
    Pagination
  },
  data() {
    return {
      formInline: {
        region: ''
      },
      form: {
        shop: '',
        user: ''
      },
      list: [],
      value: '',
      classicList: [],
      page: 1,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      id: '',
      query: '',
      ids: [],
      rules: {
        shop: [
          { required: true, message: '请输入店铺佣金比例', trigger: 'blur' }
        ],
        user: [
          { required: true, message: '请输入店员佣金比例', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this._getClassificationList()
      .then(() => {
        this._getCommissionList({ page: this.page })
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this._setMutipleCommission({ id: this.ids, shop: this.form.shop, user: this.form.user })
            .then(() => {
              this.page = 1
              this._getCommissionList({
                kind: this.id,
                condition: this.query,
                page: this.page
              })
            })
        } else {
          this.$refs.dialog.show()
          return false
        }
      })
    },
    handleMultipleSelection(list) {
      if (!list.length) {
        this.ids = []
        return
      }
      list.forEach((item) => {
        if (!this.ids.includes(item.id)) {
          this.ids.push(item.id)
        }
      })
    },
    handleSearch(query) {
      this.query = query
      this.page = 1
      this.currentPage = 1
      this.value = ''
      this._getCommissionList({ condition: this.query, page: this.page })
    },
    handleNextPage(page) {
      this.page = page
      this.currentPage = page
      this._getCommissionList({
        kind: this.id,
        condition: this.query,
        page: this.page
      })
    },
    setting() {
      if (!this.ids.length) {
        this.$message({
          message: '请先勾选',
          type: 'warning'
        })
        return
      }
      this.$refs.dialog.show()
    },
    handleChange(id) {
      this.page = 1
      this.currentPage = 1
      this.id = id
      this._getCommissionList({
        kind: id,
        condition: this.query,
        page: this.page
      })
    },
    clearInput() {
      this.$refs.searchInpur.clear()
    },
    _setMutipleCommission({ id, shop, user }) {
      return setMutipleCommission({ id, shop, user })
        .then(res => {
          if (res.code === ERR_OK) {
            this.$message({
              message: res.message
            })
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getCommissionList({ kind, condition, page }) {
      getCommissionList({ kind, condition, page })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.data
            this.total = res.data.total
            this.currentPage = res.data.current_page
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getClassificationList() {
      return new Promise((resolve, reject) => {
        getClassificationList()
          .then(res => {
            if (res.code === ERR_OK) {
              // this.classicList = this._formatClassicList(this._replaceKey(res.data, 'lower', 'children'))
              this.classicList = res.data
              console.log(this.classicList)
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject()
          })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
.commission-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  min-height: 105vh;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
  .middle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .input-cls {
        margin-right: 23px;
      }
      .el-form-item {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
      }
    }
    .right {
      .el-button {
        color: #fff;
        height: 40px;
        width: 87px;
      }
    }
  }
  .bottom {
    margin-top: 20px;
  }
}
.el-button {
  width: auto !important;
  padding: 0 10px;
}
.el-input {
  width: 200px !important;
}
.el-form-item /deep/ .el-form-item__label {
  white-space: nowrap;
  width: auto !important;
}
.dialog /deep/ .el-dialog {
  min-width: 380px;
}
</style>
